<template>
<div class="Sensors">
  <div class="top">
    <div class="title">
      {{ pond.label }}
    </div>
    <div class="content">
      <el-tree
          :current-node-key="monitorCode"
          highlight-current
          class="filter-tree"
          :data="treeData"
          :props="defaultProps"
          default-expand-all
          node-key="key"
          @node-click="handleNodeClick"
          ref="tree">
      </el-tree>
    </div>

  </div>
  <div class="bottom">
    <div class="title">
      当前变化数据
    </div>
    <div class="content table">
        <table>
            <thead>
                <tr v-if="+monitorType === MonitorType.InternalDisplacement">
                  <td width="50">设备名称</td>
                  <td width="40">通道号</td>
                  <td width="40">数据量</td>
                  <td width="80">采集时间</td>
                </tr>
                <tr v-else>
                  <td width="80">设备名称</td>
                  <td width="80">数据量</td>
                  <td>采集时间</td>
                </tr>
            </thead>
            <tbody v-if="+monitorType === MonitorType.InternalDisplacement">
                <tr v-for="(item, index) in listData" :key="index">
                  <td>{{ item.monitorName }}</td>
                  <td>{{ item.tunnel }}</td>
                  <td>{{ item.data && item.data.toFixed(2) }}</td>
                  <td>{{ item.theDate }}</td>
                </tr>
            </tbody>
            <tbody v-else>
            <tr v-for="(item, index) in listData" :key="index">
              <td>{{ item.monitorName }}</td>
              <td>{{ item.data && item.data.toFixed(2)  }}</td>
              <td>{{ item.theDate }}</td>
            </tr>
            </tbody>
        </table>
    </div>
  </div>
</div>
</template>

<script>
import { FetchMonitorPointList} from "@/api";
import groupBy from 'ramda/src/groupBy'
import {MonitorMap, MonitorType} from "@/view/client/component/TheCesiumMap/data";

export default {
  name: "Sensors",
  data(){
    return {
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      treeData :[],
      listData:[],
      MonitorType
    }
  },
  props: {
    pond: {
      type: Object,
      default() {
        return {}
      }
    },
    value: String
  },
  computed:{
    monitorCode:{
      set(val) {
        const obj = this.treeData.find(item=>item.children.some(i=>i.key === val)) || {}
        this.$emit('update:MonitorTypeId',obj.key)
        this.$emit('input',val)
      },
      get() {
        return this.value
      }
    },
    monitorType() {
      return  (this.treeData.find(node=>node.children.some(i=>i.key === this.monitorCode)) || {}).key
    }
  },
  watch:{
    monitorCode(){
      this.getList()
    },
    'pond.id':{
      immediate: true,
      async handler(id){
        if(!id){
          return
        }
        const pointList = await FetchMonitorPointList({id})
        if(!pointList){
          return
        }
        const groupList = groupBy((item) => item.monitorTypeId, pointList)
        const treeData = Object.entries(groupList).map(([key,children])=>{
          return {
            title: MonitorMap[key].name,
            key,
            children: children.map(item=>({
              title: item.name,
              key: item.monitorCode
            }))
          }
        })
        this.$emit('treeDataChange',treeData)
        this.treeData = treeData.filter(item=> +item.key !== MonitorType.Video)
        this.monitorCode = treeData[0].children[0].key
        setTimeout(()=>{
          this.$refs.tree && this.$refs.tree.setCurrentKey(this.monitorCode)
        },300)
      }
    }
  },
  methods:{
    handleNodeClick(item) {
      if(!item.children){
        this.monitorCode = item.key
      }else{
        this.$refs.tree.setCurrentKey(this.monitorCode)
      }
    },
    async getList() {
      const obj = MonitorMap[this.monitorType]
      if(!obj){
        return
      }
      obj.api({
        count: 10,
        monitorCode: this.monitorCode
      }).then((res) => {
        this.listData = res || []
      });
    },
  }
}
</script>

<style lang="scss" scoped>
table{
  width: 100%;
  border: none;
  border-collapse: collapse;
}
body tr:hover{
  background: #064264;
}
.content{
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 0; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  &::-webkit-scrollbar-thumb {
    background: transparent;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }
}
.Sensors{
  >>>{
    .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
      background-color: #064264;
    }
    .el-tree-node__content:hover,
    .el-tree-node:focus>.el-tree-node__content {
      background-color: transparent;
    }
  }
  height: 100%;
  color: #fff;
  .title{
    height: .18rem;
    line-height: .18rem;
    opacity: 0.85;
    border-left: 3px solid rgb(5, 211, 247);
    padding-left: 5px;
    background-image: linear-gradient(to right, rgb(14, 67, 115) 0%, transparent 80%);
  }
  .top{
    height: 50%;
    .content{
      overflow: auto;
      height: calc(100% - 36px);
      .el-tree {
        position: relative;
        cursor: default;
        background-color: rgba(0, 0, 0, 0);
        color: #fff;
      }
    };

  }
  .bottom{
    height: 50%;
    .content{
      overflow: auto;
      height: calc(100% - 36px);
    }
    .table {
      height: 100%;
      text-align: center;
      table tr td {
        padding: 10px 0px;
        text-align: center;
        color: #fff;
      }
    }
  }
}
</style>
